<template>
	<view class="loginPage">
		<!-- 头部 -->
		<view class="nav-box">
			<view class="nav-img-box">
				<image class="nav-img" src="http://localhost:3000/static/返回.png" mode="" @click="goBackMy"></image>
			</view>
			<view class="nav-text">
				用户登录
			</view>
		</view>
		<!-- 登录输入框 -->
		<view class="login-box">
			<view class="login-input">
				<view class="login-pad">
					<label for="uname" class="login-text">账号</label>
					<input class="login-input-text" type="text" id="uname" placeholder="请输入用户名" value="uname" v-model="uname">
				</view>
			</view>
			<view class="login-input">
				<view class="login-pad">
					<label for="pwd" class="login-text">密码</label>
					<input class="login-input-text" type="password" id="pwd" placeholder="请输入密码" value="pwd" v-model="pwd">
				</view>
			</view>
		</view>
		<!-- 登录键 -->
		<view class="loginKey">
			<view class="loginKey-pad">
				<view class="loginKey-bgc" @click="sureLogin">
					<text>登录</text>
				</view>
				<view class="noLogin">
					<view class="" @click="goRegister">
						新用户注册
					</view>
					<view class="">
						忘记密码
					</view>
				</view>
			</view>
		</view>
		<!-- 底部图标 -->
		<view class="otherLogin">
			<view class="otherLogin-text">
				其他登录方式
			</view>	
			<view class="otherLogin-box">
				<view class="otherLogin-wrap">
					<view class="otherLogin-img-box">
						<image class="otherLogin-img" src="http://localhost:3000/static/矢量智能对象.png" mode=""></image>
					</view>
					<view class="otherLogin-img-text">
						微信
					</view>
				</view>
				<view class="otherLogin-wrap">
					<view class="otherLogin-img-box">
						<image class="otherLogin-img" src="http://localhost:3000/static/矢量智能对象(1).png" mode=""></image>
					</view>
					<view class="otherLogin-img-text">
						微博
					</view>
				</view>
				<view class="otherLogin-wrap">
					<view class="otherLogin-img-box">
						<image class="otherLogin-img" src="http://localhost:3000/static/矢量智能对象(2).png" mode=""></image>
					</view>
					<view class="otherLogin-img-text">
						QQ
					</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uname:"",
				pwd:"",
        token: ''
			}
		},
		onLoad() {
			
		},
		methods: {
			goRegister(){
				uni.navigateTo({
					url:"/subpkg/register/register"
				})
			},
			goBackMy(){
				uni.switchTab({
					url:"/pages/my/my"
				})
			},
			sureLogin(){
				if(this.uname == ""||this.pwd == ""){
					uni.showToast({
						title:"账号密码不能为空！",
						icon:'none'
					})
				}else{
					this.getLogin()
				}
			},
				async getLogin(){
					let url=`/login/?uname=${this.uname}&upwd=${this.pwd}`
					const {data:res}=await uni.$http.get(url)
					// console.log(res);
					if(res.code==200){
						uni.showToast({
							title:`${res.msg}`
						}),
            // console.log(res.token);
            this.token = res.token
            uni.setStorageSync('token', this.token)
						uni.redirectTo({
							url:"/pages/my/my?name="+this.uname
						})
					}else if(res.code==400){
						uni.showToast({
							title:`${res.msg}`,
							icon:"error"
						})
					}
				}
			
		}
	}
</script>
<style lang="scss">
	.loginPage {
		padding-top: 40rpx;
		.nav-box {
			padding: 40rpx 0 26rpx 22rpx;
			display: flex;
			border-bottom: 1rpx solid #dedbdd;
			.nav-img-box {
				margin-right: 271rpx;
				.nav-img {
					width: 15rpx;
					height: 28rpx;
				}
			}
			.nav-text {
				font-size: 36rpx;
				color: #232e3d;
			}
		}
		.login-box {
			margin-top: 100rpx;
			.login-input {
				padding: 0 26rpx;
				margin-bottom: 60rpx;
				.login-pad {
					padding: 28rpx 0 28rpx 50rpx;
					display: flex;
					background-color: #F2F2F2;
					border-radius: 50rpx;
					.login-text {
						margin-right: 38rpx;
					}
					.login-input-text {
						font-size: 30rpx;
					}
				}
			}
		}
		.loginKey {
			margin-top: 140rpx;
			.loginKey-pad {
				padding: 0 24rpx;
				.loginKey-bgc {
					background-color: #232e3d;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					border-radius: 100rpx;
					color: #fff;
				}
				.noLogin {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					color: #8892A0;
					font-size: 30rpx;
				}
			}
		}
		.otherLogin {
			position: fixed;
			bottom: 0;
			left: 0;
			border-top: 2rpx solid #DDDCE1;
			color: #4f4f4f;
			width: 100%;
			text-align: center;
			.otherLogin-text {
				position: absolute;
				top: -20rpx;
				left: 50%;
				translate:-50% 0;
				background-color: #fff;
				z-index: 10;
				padding: 0 28rpx 0 30rpx;
				font-size: 30rpx;
			}
			.otherLogin-box {
				margin: 75rpx 200rpx 36rpx;
				display: flex;
				justify-content: space-between;
				.otherLogin-img-box {
					.otherLogin-img {
						width: 50rpx;
						height: 50rpx;
					}
				}
				.otherLogin-img-text {
					margin-top: 18rpx;
					color: #4f4f4f;
				}
			}
		}
	}
</style>
